<template>
    <div class="verify">
        <el-input class="verify-input" type="text" :prefix-icon="Promotion" v-model="userInput"
            placeholder="请输入手机号"></el-input>
        <div class="verify-phone">
            <div class="captcha-display">
                <span class="italic-span"></span>
                <span class="italic-span"></span>
                <span class="italic-span"></span>
                <span class="italic-span"></span>
            </div>
            <button class="refresh-btn" @click="startCountdown"  title="获取短信验证码">
                <img class="message" src="../assets/message.png" alt="" v-if="!data.isCounting">
                <span v-else title="时间结束后可以获取">{{ data.countdown }}</span>
            </button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'


onMounted(() => {
    randerVerityCode()
})

const data = reactive({
    countdown: 90,              // 倒计时初始值
    isCounting: false,          // 是否在倒计时 （判断）
})

// 渲染验证码
const randerVerityCode = () => {
    const spans = document.querySelectorAll('.italic-span')
    spans.forEach(span => {
        const skewX = Math.random() * 55 - 10
        span.style.transform = `skewX(${skewX}deg)`
        const skewY = Math.random() * 60 - 10
        span.style.transform = `skewY(${skewY}deg)`
    })
}

const startCountdown = () => {
    if (data.isCounting) return
    data.isCounting = true                                  // 初始状态 ---> true开启倒计时
    const interval = setInterval(() => {
        if (data.countdown > 0) {
            data.countdown--                            
        } else {
            clearInterval(interval)                         // 倒计时结束，清除定时器
            data.isCounting = false                         // 重置倒计时状态
        }
    }, 1000)
}

</script>

<style scoped>
.verify {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.verify-input {
    height: 34px;
    width: 240px;
}

.verify-code {
    width: 150px;
    display: flex;
    justify-content: space-between;
}

.refresh-btn {
    background: none;
    border: 1px solid #73CCE3;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.refresh-btn:hover {
    background-color: #f5f5f5;
}

.refresh-btn svg {
    fill: #666;
}

.message {
    width: 16px;
    height: 16px;
}

.captcha-display {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 30px;
    cursor: pointer;
    background-color: #f5f5f5;
    border-radius: 10px;
    color: #62C8E1;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.italic-span {
    display: inline-block;
    margin-right: 10px;
}

.verify-phone {
    width: 150px;
    display: flex;
    justify-content: space-between;
}

</style>